<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站会员购</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src = 'plug-in/jquery-2.2.0.min.js' type='text/javascript'></script>
    <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>
    <script src="js/product-common.js"></script>
    <link href="css/product.css" rel="stylesheet">
    <link href="css/product-common.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <!-- 导航栏 -->
    <product @logined="logined"></product>

    <div class="container">
        <!-- 轮播图 -->
        <div class="banner">
            <div class="carousel">
                <!-- 轮播图内容 -->
                <div class="carousel-inner">
                    <div class="carousel-item" style="background: linear-gradient(135deg, #ff85a2, #ff9a9e);">
                        <img src="image/product-lbt.png" style=" min-width: 100%; height: 100%;">
                    </div>
                    <div class="carousel-item" style="background: linear-gradient(135deg, #a18cd1, #fbc2eb);">
                        <img src="image/product-lbt2.jpg" style=" min-width: 100%; height: 100%;">
                    </div>
                    <div class="carousel-item" style="background: linear-gradient(135deg, #84fab0, #8fd3f4);">
                        <img src="image/product-lbt3.png" style=" min-width: 100%; height: 100%;">
                    </div>
                    <div class="carousel-item" style="background: linear-gradient(135deg, #ff9a9e, #fad0c4);">
                        <img src="image/product-lbt.png" style=" min-width: 100%; height: 100%;">
                    </div>
                </div>

                <!-- 指示点 -->
                <div class="carousel-indicators">
                    <div class="indicator active" data-slide-to="0"></div>
                    <div class="indicator" data-slide-to="1"></div>
                    <div class="indicator" data-slide-to="2"></div>
                    <div class="indicator" data-slide-to="3"></div>
                </div>

                <!-- 控制箭头 -->
                <div class="carousel-control prev">❮</div>
                <div class="carousel-control next">❯</div>
            </div>
        </div>

        <!-- 分类区域 -->
        <div class="category-section">
            <div class="category-title">分类</div>
            <div class="categories">
                <a href="#" class="category-item " :class="{ 'active': selectedType === null }" @click.prevent="getProduct()">全部</a>
                <a href="#" class="category-item" :class="{ 'active': selectedType === type.id }" v-for="type in productType" @click.prevent="getProductByType(type.id)">{{type.cname}}</a>
            </div>
        </div>

        <!-- 商品展示 -->
        <div class="products-section">
            <div class="products-title">商品</div>
            <div class="products-grid">
                <!-- 商品1 -->
                <div class="product-card" v-for="p in products">
                    <div class="product-image" @click="location.href = 'productdetail.html?id='+p.id"><img :src="p.image" style="width: 248px; height: 180px"></div>
                    <div class="product-info">
                        <div class="product-name">{{p.name}}</div>
                        <div class="product-price">¥{{p.price}}</div>
                    </div>
                </div>

            </div>
        </div>

        <div class="divider"></div>
    </div>
</div>
</body>

<script>
    var v = new Vue({
        el : "#app",
        data : {
            myinfo:{},
            products:{},
            productType:{},
            selectedType:null,
        },
        created() {
            this.getProduct();
            this.getProductType();
        },
        methods : {
            logined(myinfo){
                this.myinfo = myinfo;
            },
            getProduct(){
                axios.get("/product/getProducts").then(res=>{
                    if (res.data.code == 1) {
                        this.products = res.data.data;
                    }
                })
            },
            getProductType(){
                axios.get("/product/getProductType").then(res=>{
                    if (res.data.code == 1) {
                        this.productType = res.data.data;
                    }
                })
            },
            getProductByType(id){
                this.selectedType = id;
                axios.get("b-shopping/product/getProductByType?id=" + id, {
                }).then(res=>{
                    if (res.data.code == 1) {
                        this.products = res.data.data;
                    }
                })
            }
        }
    })
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const carousel = document.querySelector('.carousel');
        const inner = document.querySelector('.carousel-inner');
        const items = document.querySelectorAll('.carousel-item');
        const indicators = document.querySelectorAll('.indicator');
        const prevBtn = document.querySelector('.carousel-control.prev');
        const nextBtn = document.querySelector('.carousel-control.next');
        
        let currentIndex = 0;
        let intervalId = null;
        const itemCount = items.length;
        
        // 更新轮播图位置
        function updateCarousel() {
            inner.style.transform = `translateX(-${currentIndex * 100}%)`;
            
            // 更新指示点状态
            indicators.forEach((indicator, index) => {
                indicator.classList.toggle('active', index === currentIndex);
            });
        }
        
        // 下一张
        function nextSlide() {
            currentIndex = (currentIndex + 1) % itemCount;
            updateCarousel();
        }
        
        // 上一张
        function prevSlide() {
            currentIndex = (currentIndex - 1 + itemCount) % itemCount;
            updateCarousel();
        }
        
        // 自动轮播
        function startAutoPlay() {
            intervalId = setInterval(nextSlide, 3000);
        }
        
        // 停止自动轮播
        function stopAutoPlay() {
            clearInterval(intervalId);
        }
        
        // 事件监听
        nextBtn.addEventListener('click', () => {
            nextSlide();
            stopAutoPlay();
            startAutoPlay();
        });
        
        prevBtn.addEventListener('click', () => {
            prevSlide();
            stopAutoPlay();
            startAutoPlay();
        });
        
        indicators.forEach(indicator => {
            indicator.addEventListener('click', () => {
                currentIndex = parseInt(indicator.getAttribute('data-slide-to'));
                updateCarousel();
                stopAutoPlay();
                startAutoPlay();
            });
        });
        
        // 鼠标悬停暂停轮播
        carousel.addEventListener('mouseenter', stopAutoPlay);
        carousel.addEventListener('mouseleave', startAutoPlay);
        
        // 开始自动轮播
        startAutoPlay();
    });
</script>
</html>